import React, { Component } from 'react';
import { Card, Table, Badge, Modal, message } from 'antd';
import { connect } from 'react-redux';
import { actionCreators } from '../table_basic/store';

import './style.less';

class highTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [   // 表头
        {
          title: 'id',
          width: 80,
          dataIndex: 'id'
        },
        {
          title: '用户名',
          width: 80,
          dataIndex: 'userName'
        },
        {
          title: '性别',
          width: 80,
          dataIndex: 'sex',
          render(sex) {
            return sex === 1 ? '男' : '女'
          }
        },
        {
          title: '状态',
          width: 80,
          dataIndex: 'state',
          render(state) {
            const config = {
              '1': '咸鱼一条',
              '2': '风华浪子',
              '3': '北大才子',
              '4': '创业者',
              '5': '未名湖畔'
            };
            return config[state];
          }
        },
        {
          title: '爱好',
          width: 80,
          dataIndex: 'interest',
          render(interest) {
            const config = {
              '1': '游泳',
              '2': '打篮球',
              '3': '踢足球',
              '4': '跑步',
              '5': '爬山',
              '6': '骑行',
              '7': '桌球',
              '8': '麦霸',
            };
            return config[interest];
          }
        },
        {
          title: '生日',
          width: 80,
          dataIndex: 'birthday'
        },
        {
          title: '地址',
          width: 80,
          dataIndex: 'address'
        },
        {
          title: '早起时间',
          width: 80,
          dataIndex: 'time'
        },
      ],
      columns2: [   // 表头
        {
          title: 'id',
          width: 80,
          fixed: 'left',
          dataIndex: 'id'
        },
        {
          title: '用户名',
          width: 80,
          fixed: 'left',
          dataIndex: 'userName'
        },
        {
          title: '年龄',
          width: 80,
          dataIndex: 'age'
        },
        {
          title: '性别',
          width: 80,
          dataIndex: 'sex',
          render(sex) {
            return sex === 1 ? '男' : '女'
          }
        },
        {
          title: '状态',
          width: 80,
          dataIndex: 'state',
          render(state) {
            const config = {
              '1': '咸鱼一条',
              '2': '风华浪子',
              '3': '北大才子',
              '4': '创业者',
              '5': '未名湖畔'
            };
            return config[state];
          }
        },
        {
          title: '爱好',
          width: 80,
          dataIndex: 'interest',
          render(interest) {
            const config = {
              '1': '游泳',
              '2': '打篮球',
              '3': '踢足球',
              '4': '跑步',
              '5': '爬山',
              '6': '骑行',
              '7': '桌球',
              '8': '麦霸',
            };
            return config[interest];
          }
        },
        {
          title: '生日',
          width: 80,
          dataIndex: 'birthday'
        },
        {
          title: '地址',
          width: 80,
          dataIndex: 'address'
        },
        {
          title: '早起时间',
          width: 100,
          fixed: 'right',
          dataIndex: 'time'
        },
      ],
      orderOrder: ''
    }
  }

  render() {
    const { columns, columns2 } = this.state;
    const { basicTableData } = this.props;

    const columns3 = [   // 表头
      {
        title: 'id',
        width: 80,
        dataIndex: 'id'
      },
      {
        title: '用户名',
        width: 80,
        dataIndex: 'userName'
      },
      {
        title: '年龄',
        width: 80,
        dataIndex: 'age',
        sorter: (a, b) => {
          return a.age - b.age
        },
        orderOrder: this.state.sortOrder
      },
      {
        title: '性别',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex === 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        width: 80,
        dataIndex: 'state',
        render(state) {
          const config = {
            '1': <Badge status="success" text="成功" />,
            '2': <Badge status="error" text="报错" />,
            '3': <Badge status="default" text="正常" />,
            '4': <Badge status="processing" text="进行中" />,
            '5': <Badge status="warning" text="警告" />
          };
          return config[state];
        }
      },
      {
        title: '爱好',
        width: 80,
        dataIndex: 'interest',
        render(interest) {
          const config = {
            '1': '游泳',
            '2': '打篮球',
            '3': '踢足球',
            '4': '跑步',
            '5': '爬山',
            '6': '骑行',
            '7': '桌球',
            '8': '麦霸',
          };
          return config[interest];
        }
      },
      {
        title: '生日',
        width: 80,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        width: 80,
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        width: 80,
        dataIndex: 'time'
      },
      {
        title: '操作',
        width: 80,
        render:(text, item)=> {
          return <a href="###" onClick={() => this.handleDelete(item)}>删除</a>
        }
      }
    ];
    return (
      <div>
        <Card title="头部表格" className="pinlor-cards">
          <Table
            bordered
            columns={columns}
            pagination={false}
            scroll={{ y: 240 }}
            dataSource={basicTableData} />
        </Card>
        <Card title="左右固定" className="pinlor-cards">
          <Table
            bordered
            columns={columns2}
            dataSource={basicTableData}
            scroll={{ x: 2140 }}
            pagination={false} />
        </Card>
        <Card title="表格排序" className="pinlor-cards">
          <Table
            bordered
            columns={columns3}
            dataSource={basicTableData}
            onChange={this.handleChange}
            pagination={false} />
        </Card>
        <Card title="表格标徽" className="pinlor-cards">
          <Table
            bordered
            columns={columns3}
            dataSource={basicTableData}
            onChange={this.handleChange}
            pagination={false} />
        </Card>
      </div>
    )
  }

  componentDidMount() {
    this.props.getBasicTableData();
  }

  handleChange = (pagination, filter, sorter) => {
    this.setState({
      sortOrder: sorter.order
    })
  };

  handleDelete = item => {
    // 删除操作
    const id = item.id;
    Modal.confirm({
      title: '确认',
      content: '您确认要删除词条数据吗？',
      onOk: () => {
        message.success(`id${id}被删除`);
      }
    })
  }
}

const mapStateToProps = state => {
  const { basicTableData } = state.basicTable;
  return {
    basicTableData: basicTableData.result
  }
};
const mapDispatchToProps = dispatch => ({
  getBasicTableData() {
    dispatch(actionCreators.getBasicTableData());
  }
});
export default connect(mapStateToProps, mapDispatchToProps)(highTable);
